<template>
  <ScreenLayoutWithMenu title="客户服务分析大屏">
    <div class="screen-grid grid-3x2">
      <ChartCard title="服务工单趋势" grid-area="a">
        <ECharts :option="ticketOption" />
      </ChartCard>
      <ChartCard title="问题分类" grid-area="b">
        <ECharts :option="issueCategoryOption" />
      </ChartCard>
      <ChartCard title="服务指标" grid-area="c">
        <div class="stats-container">
          <div class="stat-item">
            <div class="stat-value">98.5%</div>
            <div class="stat-label">满意度</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">4.2min</div>
            <div class="stat-label">平均响应</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">95.8%</div>
            <div class="stat-label">解决率</div>
          </div>
        </div>
      </ChartCard>
      <ChartCard title="服务渠道" grid-area="d">
        <ECharts :option="channelOption" />
      </ChartCard>
      <ChartCard title="处理时长分布" grid-area="e">
        <ECharts :option="durationOption" />
      </ChartCard>
      <ChartCard title="满意度趋势" grid-area="f">
        <ECharts :option="satisfactionOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import { generateRandomData, getBarOption, getLineOption, getPieOption } from '../utils/chartOptions'
import './Screen.css'

const ticketOption = ref({})
const issueCategoryOption = ref({})
const channelOption = ref({})
const durationOption = ref({})
const satisfactionOption = ref({})

onMounted(() => {
  const days = Array.from({ length: 30 }, (_, i) => `${i + 1}日`)
  
  ticketOption.value = getLineOption({
    categories: days,
    series: [{
      name: '工单数',
      data: Array.from({ length: 30 }, () => Math.floor(Math.random() * 100) + 200)
    }]
  })

  issueCategoryOption.value = getBarOption({
    categories: ['技术问题', '使用问题', '产品问题', '其他'],
    series: [{
      name: '数量',
      data: [150, 120, 80, 30]
    }]
  })

  channelOption.value = getPieOption({
    name: '服务渠道',
    data: [
      { value: 250, name: '在线客服' },
      { value: 180, name: '电话客服' },
      { value: 120, name: '邮件' },
      { value: 50, name: '其他' }
    ]
  })

  durationOption.value = getBarOption({
    categories: ['0-5min', '5-15min', '15-30min', '30min+'],
    series: [{
      name: '工单数',
      data: [350, 200, 80, 20]
    }]
  })

  satisfactionOption.value = getLineOption({
    categories: days,
    series: [{
      name: '满意度',
      data: Array.from({ length: 30 }, () => Math.floor(Math.random() * 5) + 95)
    }]
  })
})
</script>
